<template>
  <el-dialog
    v-model="visible"
    width="600px"
    :title="type === 1 ? '同意审批' : '拒绝审批'"
    destroy-on-close
    @close="close"
    class="has-border-dialog"
    modal-class="dialogZIndex"
  >
    <el-form ref="formRef" :model="formValue">
      <el-form-item v-if="include.includes('text')" prop="remark">
        <el-input
          v-model="formValue.remark"
          :autosize="{ minRows: 4, maxRows: 6 }"
          type="textarea"
          maxlength="255"
          show-word-limit
          :placeholder="type === 1 ? '审批意见' : '驳回意见'"
        />
      </el-form-item>

      <el-form-item v-if="include.includes('image')" prop="image">
        <MUpload
          v-model="formValue.imgFiles"
          :maxSize="10"
          listType="picture-card"
          accept=".png,.jpg,.jpeg"
        >
        </MUpload>
        <div>添加图片 | 每张图片不超过10M</div>
      </el-form-item>

      <el-form-item v-if="include.includes('file')" prop="files">
        <MUpload
          v-model="formValue.files"
          listType="text"
          :maxSize="100"
          :preview="previewHandler"
        >
          <el-button>
            <m-icon name="icon-link" style="margin-right: 5px"></m-icon>
            选择文件
          </el-button>
        </MUpload>
        <div>添加附件 | 单个附件不超过100M</div>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="process"> 提交 </el-button>
      </span>
    </template>

    <MFileList ref="mfileList" :fileData="fileData" />
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'
import { useMessage } from '@/hooks'
import { FormInstance } from 'element-plus'
import { handlerFlow } from '@/api/spotCheck/spotCheck'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter()
const props = withDefaults(
  defineProps<{
    include: ('text' | 'file' | 'image')[]
  }>(),
  {
    include: () => ['text', 'file', 'image']
  }
)

const emits = defineEmits(['reload'])

const { message } = useMessage()

const visible = ref(false)

const formValue = ref({
  remark: '',
  files: [],
  imgFiles: [],
  sorgRiskHandleId: ''
})

const formRef = ref<FormInstance>()

const loading = ref(false)

const process = () => {
  if (loading.value) return

  let files = [
    ...(formValue.value?.imgFiles || []),
    ...(formValue.value?.files || [])
  ]
  if (Array.isArray(files) && files.length > 0) {
    files = files.map((i) => ({
      fileName: i.name,
      filePage: 1,
      fileUrl: i.url
    }))
  }
  const data = {
    files,
    remark: formValue.value.remark,
    status: type.value,
    sorgRiskHandleId: formValue.value.sorgRiskHandleId
  }
  console.log('files', data)
  loading.value = true
  handlerFlow(data)
    .then((res) => {
      close()
      emits('reload')
      ElMessage.success(type.value === 0 ? '已拒绝' : '审批通过！')
      router.go(-1)
    })
    .finally(() => {
      loading.value = false
    })
}

const close = () => {
  formRef.value?.resetFields()
  fileData.value = []
  visible.value = false
}

const mfileList = ref()
const fileData = ref<any[]>([])
const previewHandler: any = (file: any[]) => {
  console.log('file', file)
  fileData.value = [file]
  mfileList.value.detailsVisible = true
}

//0 拒绝 1 通过
const type = ref(0)
const show = (it, id) => {
  type.value = it
  formValue.value.sorgRiskHandleId = id
  visible.value = true
  nextTick(() => {
    formRef.value?.resetFields()
    if (it === 1) {
      formValue.value.remark = '同意，通过本次整改'
    }
  })
}

defineExpose({
  show
})
</script>

<style lang="scss" scoped>
:deep(.el-dialog__body) {
  border-top: 2px solid #f8f8f8;
  border-bottom: 2px solid #f8f8f8;
}

:deep(.el-upload-list--picture-card) {
  --el-upload-list-picture-card-size: 100px;
}

:deep(.el-upload--picture-card) {
  --el-upload-picture-card-size: 100px;
}

.selectPeople {
  display: inline-block;
  padding: 0 10px;
  border: 1px solid #8e8e8e;
  border-radius: 5px;
  cursor: pointer;
}
.dialogZIndex {
  z-index: 100 !important;
}
</style>
<style>
.viewer-container {
  z-index: 9999 !important;
}
</style>
